<template>
  <div class="index-container">
    <el-row :gutter="20">
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-card class="access" shadow="hover" skeleton>
          <template #header>
            <vab-icon icon="archive-drawer-line" />
            加工设备
          </template>
          <div class="">
            <el-row :gutter="20">
              <el-col
                v-for="(item, index) in MachineDeviceList"
                :key="index"
                :lg="6"
                :md="6"
                :sm="6"
                :xl="6"
                :xs="6"
              >
                <equipment-state1 :DeviceInfo="item" @fetch-data="initData" />
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-card class="access" shadow="hover" skeleton>
          <template #header>
            <vab-icon icon="archive-drawer-line" />
            运输设备
          </template>
          <div class="">
            <el-row :gutter="20">
              <el-col
                v-for="(item, index) in TransportDeviceList"
                :key="index"
                :lg="6"
                :md="6"
                :sm="6"
                :xl="6"
                :xs="6"
              >
                <equipment-state2 :DeviceInfo="item" @fetch-data="initData" />
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    List,
    DeviceState,
    DeviceStatistics,
    DeviceRunningInfo,
    GetAllDevice,
    DeviceUseRequest,
  } from '@/api/index'
  import EquipmentState1 from '@/components/equipment/state1'
  import EquipmentState2 from '@/components/equipment/state2'

  export default {
    name: 'Index',
    components: {
      EquipmentState1,
      EquipmentState2,
    },
    data() {
      return {
        MachineDeviceList: [],
        TransportDeviceList: [],
      }
    },
    created() {
      this.inverterMonTimer = setInterval(() => {
        this.initData()
      }, 1000)
      this.initData()
    },
    methods: {
      initData() {
        GetAllDevice({ LineName: 'ProcessLine' }).then((res) => {
          console.log('GetAllDevice', res)
          this.MachineDeviceList = res.MachineDeviceList
          this.TransportDeviceList = res.TransportDeviceList
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .index-container {
    padding: 0 !important;
    background: $base-color-background !important;

    :deep() {
      .access,
      .authorization,
      .version-information {
        min-height: 268px;
      }

      .el-card {
        .el-card__header {
          position: relative;

          .card-header-tag {
            position: absolute;
            top: 15px;
            right: $base-margin;
          }

          > div > span {
            display: flex;
            align-items: center;

            i {
              margin-right: 3px;
            }
          }
        }

        .el-card__body {
          position: relative;

          .echarts {
            width: 100%;
            height: 127px;
          }

          .card-footer-tag {
            position: absolute;
            right: $base-margin;
            bottom: 15px;
          }
        }
      }

      .bottom {
        padding-top: 20px;
        margin-top: 5px;
        color: #595959;
        text-align: left;
        border-top: 1px solid $base-border-color;
      }
    }
  }
</style>
